<template>

  <div class="pt-6">
    <van-form @submit="confirmQuery">
      <van-cell-group inset>
        <van-field
            v-model="name"
            name="name"
            label="用户名"
            placeholder="用户名"
            required
            :rules="[
            { required: true, message: '请填写用户名' },
            { validator: validateNameLength, message: '用户名长度必须在2到10个字符之间' }
          ]"
        />
        <van-field
            v-model="mobile"
            name="mobile"
            label="手机号"
            type="tel"
            placeholder="手机号"
            required
            :rules="[
            { required: true, message: '请填写手机号' },
            { validator: validateMobile, message: '请输入有效的中国大陆手机号' }
          ]"
        />
        <van-field name="sex" label="性别">
          <template #input>
            <van-radio-group v-model="sex" direction="horizontal">
              <van-radio name="1">男</van-radio>
              <van-radio name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
            v-model="company"
            name="company"
            label="公司"
            placeholder="公司"
            :rules="[
            { validator: validateCompanyLength, message: '公司名称长度不能超过50个字符' }
          ]"
        />
        <van-field
            v-model="position"
            name="position"
            label="职务"
            placeholder="职务"
            :rules="[
            { validator: validatePositionLength, message: '职务名称长度不能超过50个字符' }
          ]"
        />
        <van-field
            v-model="email"
            name="email"
            label="邮箱"
            placeholder="邮箱"
            :rules="[
            { validator: validateEmail, message: '请输入有效的邮箱地址' }
          ]"
        />
        <van-field
            v-model="telephone"
            name="telephone"
            label="座机"
            placeholder="座机"
            :rules="[
            { validator: validateTelephone, message: '请输入有效的座机号码' }
          ]"
        />
        <van-field
            v-model="address"
            name="address"
            label="地址"
            placeholder="地址"
            :rules="[
            { validator: validateAddressLength, message: '地址长度不能超过50个字符' }
          ]"
        />
        <van-field
            v-show="false"
            v-model="omniUserUuid"
            name="sale_uuid"
            label=""
            placeholder=""
        />
      </van-cell-group>
      <van-sticky position="bottom">
        <div class="p-2" style="background-color: #ffffff">
          <van-row :gutter="[10]">
            <van-col span="12">
              <van-button type="default" style="width:100%" block @click="cancelQuery">取消</van-button>
            </van-col>
            <van-col span="12">
              <van-button type="primary" style="width:100%" block native-type="submit">确认</van-button>
            </van-col>
          </van-row>
        </div>
      </van-sticky>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { LeadsAdd } from "@/api/leads.ts";
import { Recognition } from "@/api/leads.ts";

const props = defineProps<{
  recognitionData: Recognition | null,
  sale_uuid:string
}>();

const omniUserUuid = ref(props.sale_uuid);
const name = ref("");
const sex = ref(0);
const company = ref("");
const position = ref("");
const mobile = ref("");
const email = ref("");
const telephone = ref("");
const address = ref("");

watch(
    () => props.recognitionData,
    (newData) => {
      if (newData) {
        name.value = newData.name;
        company.value = newData.company;
        position.value = newData.position;
        mobile.value = newData.mobile;
        email.value = newData.email;
        telephone.value = newData.telephone;
        address.value = newData.address;
      }
    },
    { immediate: true }
);

const emits = defineEmits(['update:show']);

// 自定义验证函数
const validateNameLength = (value: string): boolean => value.length >= 2 && value.length <= 4;

const validateMobile = (value: string): boolean => /^1[3-9]\d{9}$/.test(value);

const validateCompanyLength = (value: string): boolean => !value || value.length <= 50;

const validatePositionLength = (value: string): boolean => !value || value.length <= 50;

const validateEmail = (value: string): boolean => !value || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);

const validateTelephone = (value: string): boolean => !value || /^(?:400-\d{3}-\d{4}|(?:\d{3,4}-)?\d{7,8})$/.test(value);

const validateAddressLength = (value: string): boolean => !value || value.length <= 50;

const cancelQuery = () => {
  reset()
  emits('update:show');
};
const reset = ()=>{
  name.value = "";
  company.value = "";
  sex.value = 0;
  position.value = "";
  mobile.value = "";
  email.value = "";
  telephone.value = "";
  address.value = "";
}

const confirmQuery = (values: object) => addLeads(values);

const addLeads = async (data: object) => {
  try {
    const response = await LeadsAdd(data);
    if (response.code === 0) {
      reset()
      emits('update:show',true);
    }
  } catch (e) {
    console.log(e);
  }
};
</script>

<style scoped>
/* Add any scoped styles if needed */
</style>
